<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星登陆页面</title>
		<style>
			/* * 通配符 */
			/* 给网页中所有标签内置的外边距和内边距清零 */
			*{
				margin:0;
				padding:0;
			}
			body{
				background:url('img/bacg.jpg') no-repeat center/100% 100%;
				width:100vw;
				height:100vh;
				position:relative;
			}
			img{
				position:absolute;
				left:30px;
				top:50px;
			}
			.R-box{
				position:absolute;
				right:30px;
				top:50px;
				/* width:210px; */
			}
			.R-box a{
				display:inline-block;
				width:80px;
				height:30px;
				border:1px solid #FFF;
				border-radius:20px;
				text-align:center;
				line-height:30px;
				font-size:20px;
				color:#FFF;
				text-decoration:none;
			}
			.R-box .home{
				width:100px;
				margin-left:10px;
			}
			.login-main{
				width:450px;
				height:500px;
				border-radius:20px;
				position:absolute;
				left:50%;
				top:50%;
				transform:translate(-50%,-50%);
				background-color:white;
			}
			.login-li{
				width:400px;
				height:46px;
				/* border:1px solid red; */
				margin:7px auto;
				line-height:46px;
				text-align:left;
			}
			.login-li h2{
				color:#fa911e;
				font-size:26px;
			}
			.li-border{
				border:1px solid #ccc;
				border-radius:25px;
			}
			.input{
				border:0;
				outline:none;
				font-size:16px;
				margin-left:5px;
			}
			.user-psd{
				float:right;
				color:black;
				font-size:
			}
			.login-input{
				width:400px;
				height:46px;
				border-radius:25px;
				background-color:#fa911e;
				border:0;
				color:#fff;
				font-size:26px;
			}
			.register-input{
				width:400px;
				height:46px;
				background-color:#fff;
				color:#fa911e;
				font-size:26px;
				border:0;
			}
			.other{
				padding:0 5px;
			}
			.ot:before,.ot:after{
				content:"";
				display:inline-block;
				width:140px;
				height:1px;
				background-color:grey;
			}
			.login-center{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<img src="img/logo.png"/>
		<div class="R-box">
			<a href="#">注册</a>
			<a href="#" class="home">返回首页</a>
		</div>
		<div class="login-main">
			<div class="login-li">
					<h2>问卷星登陆</h2>
			</div>
					<div class="login-li li-border">
						<input type="text" placeholder="用户名/E-main/手机" class="input"/>
					</div>
					<div class="login-li li-border">
						<input type="password" placeholder="请输入登陆密码" class="input"/>
					</div>
					<div class="login-li">
						<input type="checkbox"/><span>下次自动登陆</span>
						<a href="#" class="user-psd">忘记用户名/密码</a>
					</div>
					<div class="login-li">
						<input type="button" value="登陆" class="login-input"/>
					</div>
					<div class="login-li">
						<input type="button" value="立即注册" class="register-input"/>
					</div>
					<div class="login-li login-center">
						<span class="ot">第三方登陆</span>
				</div>
		</div>
	</body>
</html>
